<template>
	<view class="content">
		<navbar :title="title" :isback="isback"></navbar>
		<view
			style="width: 100%;position: absolute;top: 30rpx;z-index: 10;display: flex;align-items: center;justify-content: center;">
			<u-loading mode="circle" color="green" size="50"></u-loading>
		</view>
		<view class="newsbox">
			<view class="newslist" v-for="(item,index) in news" :key="index" @click="toDetail(item)">
				<text>{{item.memor_title}}</text>
				<!-- <view class=""> -->
					<view class="zan_list" v-if="item.news_zan.length > 0" v-for="(it,idx) in item.news_zan" :key="it.name">
						<text>{{it.name}} </text>
						<text style="color: #000000;"> {{it.zan_status == 1?'赞了您的笔记':it.zan_status == 2?'取消了点赞':''}}</text>
					</view>
				<!-- </view> -->
				<!-- <view class=""> -->
					<view class="zan_list comment" v-if="item.news_comment.length > 0">
						<view class="comment_list" v-for="(comment,idxx) in item.news_comment" :key="idxx+'comment'">
							<text>{{comment.name}}</text>
							<view class="passive" v-if="comment.passive_uid">
								<text style="color: #000000;">回复</text>
								<text >{{comment.passive_name}}</text>
							</view>
							<text style="color: #000000;"> ：</text>
							
							<text style="color: #000000;">{{comment.content}}</text>
						</view>
					</view>
				<!-- </view> -->
				<u-badge size="mini" type="error" :is-dot="true" is-center="true" v-if="item.is_read == 2"></u-badge>
			</view>
		</view>
		<u-empty mode="message" text="还没有人给你点赞、评论哦~~" :show="true" v-if="news.length == 0"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '消息',
				isback: true,
				
				pageIndex:1 , // 第几页
				hasMore: true, // 是否还有更多默认true
				is_pull: false, // 是否刷新状态
				news:[],  // 消息列表
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.pageIndex = 1;  // 第几页
			this.hasMore = true; // 是否还有更多默认true
			this.is_pull = false; // 是否刷新状态
			this.news = [];  // 消息列表
			this.getNotic();
		},
		methods: {
			// 获取未读通知
			getNotic(){
				let that = this;
				uniCloud.callFunction({
					name: 'notic',
					data: {
						filter: {
							memor_uid: that.$store.state.uid, // 添加uid，表示用户标识
							// is_read: 2,  // 1已读 2未读
						}, //筛选条件，格式{sex:'女'}
						pageIndex: this.pageIndex, //第几页
						pageSize: 10 //每页的记录条数
					}
				}).then((res) => {
					// console.log(res);
					if (that.is_pull) {
						// this.pageIndex = 1;
						that.news = [];
					}
					// console.log(res);
					//停止下拉样式
					uni.stopPullDownRefresh();
					that.is_pull = false;
					let datalist = res.result.data;
					
					that.news = that.news.concat(datalist);
					that.hasMore = res.result.hasMore;
					
				}).catch((err) => {
					uni.showModal({
						content: `获取失败，错误信息为：${err.message}`,
						showCancel: false
					})
					
				})
			},
			// 查看详情
			toDetail(item) {
				if(item.is_read == 2){
					uniCloud.callFunction({
						name: 'notic',
						data: {
							unread: 1, // 表示更改已读状态 1:已读 2:未读
							_id: item._id,
						}
					}).then((res) => {
						// console.log(res);
						if(res.result.code == 0){
							uni.navigateTo({
								url: '../index/memorDetail/memorDetail?_id=' + item.memor_id
							})
						}
						
					}).catch((err) => {
						uni.showModal({
							content: `请刷新后进入`,
							showCancel: false
						})
						
					})
				}else{
					uni.navigateTo({
						url: '../index/memorDetail/memorDetail?_id=' + item.memor_id
					})
				}
				
				
			},
		},
		// 下拉的生命周期
		onPullDownRefresh() {
			this.pageIndex = 1;
			this.is_pull = true;
			this.getNotic();
		
		},
		// 上拉
		onReachBottom() {
			if (this.hasMore) {
				this.pageIndex++
				this.getNotic();
			}
		},
	}
</script>

<style scoped>
	/* page{
		background-color: #EDEDED;
	}
	.content{
		height: 100vh;
		background-color: #EDEDED;
	} */
	
	.newsbox{
		padding: 30rpx;
		padding-top: 0;
	}
	.newslist{
		background-color: #F0AD4E;
		border-radius: 30rpx;
		margin-top: 30rpx;
		position: relative;
	}
	.newslist>text{
		display: block;
		padding: 16rpx 30rpx;
		font-size: 36rpx;
		border-bottom: 10rpx solid #FFFFFF;
		font-weight: bold;
	}
	
	.zan_list {
		background-color: #f7f7f7;
		padding: 10rpx 20rpx;
		border-bottom: 1rpx solid #e0e0e0;
		/* margin-top: 10rpx; */
		color: #566a94;
		display: flex;
		/* flex-direction: column; */
		border-radius: 4rpx;
	}
	
	.comment{
		display: flex;
		flex-direction: column;
	}
	.comment_list{
		display: flex;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #e0e0e0;
		font-size: 26rpx;
	}
	.zan_list:last-child,.comment_list:last-child{
		border: none !important;
	}
	
</style>
